<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:800">
    <style>
        .text {
            font: 14.5em/1 Open Sans, Impact;
            text-transform: uppercase;
            /* fill: url(#gr-simple); */
        }

        .textBox {
            background: #222 -webkit-linear-gradient(0deg, #222 50%, #272727 50%);
            background: #222 linear-gradient(90deg, #222 50%, #272727 50%);
            background-size: .2em 100%;
            text-transform: uppercase;
            margin: 0;
        }

        /* Colorize & animate pattern */
        .g-stars polygon {
            stroke-width: 0;
            -webkit-animation: stroke 2s infinite;
            animation: stroke 2s infinite;
        }

        .g-stars polygon:nth-child(5n + 1) {
            fill: #551F7A;
            stroke: #551F7A;
            -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
        }

        .g-stars polygon:nth-child(5n + 2) {
            fill: #BA2799;
            stroke: #BA2799;
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        .g-stars polygon:nth-child(5n + 3) {
            fill: #D9587A;
            stroke: #D9587A;
            -webkit-animation-delay: -1.2s;
            animation-delay: -1.2s;
        }

        .g-stars polygon:nth-child(5n + 4) {
            fill: #FFDD00;
            stroke: #FFDD00;
            -webkit-animation-delay: -1.6s;
            animation-delay: -1.6s;
        }

        .g-stars polygon:nth-child(5n + 5) {
            fill: #FFF3A1;
            stroke: #FFF3A1;
            -webkit-animation-delay: -2s;
            animation-delay: -2s;
        }

        /* Change stroke-width within animation */
        @-webkit-keyframes stroke {
            50% {
                stroke-width: 8;
            }
        }

        @keyframes stroke {
            50% {
                stroke-width: 8;
            }
        }

        .textStart {
            fill: url(#p-stars);
            stroke: #551F7A;
            stroke-width: 3;
        }

        .textSpots {
            fill: none;
            /* 边框填充 */
            stroke: url(#p-spots);
            stroke-width: 8;
            stroke-linejoin: round;
        }

        /* Colorize & animate pattern */
        .g-spots ellipse {
            stroke-width: 0;
            stroke-opacity: 1;
            -webkit-animation: strokespots 1.5s infinite;
            animation: strokespots 1.5s infinite;
        }

        .g-spots ellipse:nth-child(5n + 1) {
            fill: #3F0B1B;
            stroke: #3F0B1B;
            -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
        }

        .g-spots ellipse:nth-child(5n + 2) {
            fill: #7A1631;
            stroke: #7A1631;
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }

        .g-spots ellipse:nth-child(5n + 3) {
            fill: #CF423C;
            stroke: #CF423C;
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .g-spots ellipse:nth-child(5n + 4) {
            fill: #FC7D49;
            stroke: #FC7D49;
            -webkit-animation-delay: -1.2s;
            animation-delay: -1.2s;
        }

        .g-spots ellipse:nth-child(5n + 5) {
            fill: #FFD462;
            stroke: #FFD462;
            -webkit-animation-delay: -1.5s;
            animation-delay: -1.5s;
        }

        /* Change stroke-width inside animation */
        @-webkit-keyframes strokespots {
            50% {
                stroke-width: 27;
                stroke-opacity: .5;
            }
        }

        @keyframes strokespots {
            50% {
                stroke-width: 27;
                stroke-opacity: .5;
            }
        }



        .s-text {
            fill: none;
            stroke-width: 6;
            stroke-linejoin: round;
            stroke-dasharray: 70 330;
            stroke-dashoffset: 0;
            -webkit-animation: stroke 6s infinite linear;
            animation: strokes-text 6s infinite linear;
        }

        .s-text:nth-child(5n + 1) {
            stroke: #F2385A;
            -webkit-animation-delay: -1.2s;
            animation-delay: -1.2s;
        }

        .s-text:nth-child(5n + 2) {
            stroke: #F5A503;
            -webkit-animation-delay: -2.4s;
            animation-delay: -2.4s;
        }

        .s-text:nth-child(5n + 3) {
            stroke: #E9F1DF;
            -webkit-animation-delay: -3.6s;
            animation-delay: -3.6s;
        }

        .s-text:nth-child(5n + 4) {
            stroke: #56D9CD;
            -webkit-animation-delay: -4.8s;
            animation-delay: -4.8s;
        }

        .s-text:nth-child(5n + 5) {
            stroke: #3AA1BF;
            -webkit-animation-delay: -6s;
            animation-delay: -6s;
        }

        @-webkit-keyframes strokes-text {
            100% {
                stroke-dashoffset: -400;
            }
        }

        @keyframes strokes-text {
            100% {
                stroke-dashoffset: -400;
            }
        }

        .text--transparent {
            fill: transparent;
        }

        .anim-shape {
            transform-origin: 0x 150px;
            transform: scale(0, 1) translate(0, 0);
            animation: moving-panel 3s infinite alternate;
        }

        .colortext .anim-shape:nth-child(1) {
            fill: #0E1826;
        }

        .colortext .anim-shape:nth-child(2) {
            fill: #166973;
        }

        .colortext .anim-shape:nth-child(3) {
            fill: #65BFA6;
        }

        .colortext .anim-shape:nth-child(4) {
            fill: #F2CD5C;
        }

        .colortext .anim-shape:nth-child(5) {
            fill: #F26444;
        }

        .shadow {
            transform: translate(10px, 10px);
        }

        .anim-shape--shadow {
            fill: #000;
            fill-opacity: .2;
        }


        @keyframes moving-panel {
            100% {
                transform: scale(1, 1) translate(20px, 0);
            }
        }
    </style>
</head>

<body>
    <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent" />
    </svg>
    <svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M80 80
                 A 45 45, 0, 0, 0, 125 125
                 L 125 80 Z" fill="green" />
        <path d="M230 80
                 A 45 45, 0, 1, 0, 275 125
                 L 275 80 Z" fill="red" />
        <path d="M80 230
                 A 45 45, 0, 0, 1, 125 275
                 L 125 230 Z" fill="purple" />
        <path d="M230 230
                 A 45 45, 0, 1, 1, 275 275
                 L 275 230 Z" fill="blue" />
    </svg>
    <svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path id="my_path" d="M 100 200 Q 200 100 300 200 T 500 200" stroke="rgb(0,255,0)" fill="none" />
        <text>
            <textPath xlink:href="#my_path">This text follows a curve.</textPath>
        </text>
    </svg>
    <svg viewBox="10 10 600 300">
        <!-- Gradient -->
        <linearGradient id="gr-simple" x1="0" y1="0" x2="100%" y2="100%">
            <stop stop-color="hsl(50, 100%, 70%)" offset="10%" />
            <stop stop-color="hsl(320, 100%, 50%)" offset="90%" />
        </linearGradient>
        <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text" fill="url(#gr-simple)"> Text </text>
    </svg>
    <div class="textBox">
        <svg viewBox="10 10 600 300">
            <!-- Gradient -->
            <radialGradient id="gr-radial" cx="50%" cy="50%" r="70%">
                <!-- Animation for radius of gradient -->
                <animate attributeName="r" values="0%;150%;100%;0%" dur="5s" repeatCount="indefinite" />
                <!-- Animation for colors of stop-color -->
                <stop stop-color="#FFF" offset="0">
                    <animate attributeName="stop-color" values="#333;#FFF;#FFF;#333" dur="5s"
                        repeatCount="indefinite" />
                </stop>
                <stop stop-color="rgba(55,55,55,0)" offset="100%" />
            </radialGradient>

            <text text-anchor="middle" x="50%" y="60%" dy=".35em" class="text text2" fill="url(#gr-radial)"> Text
            </text>
        </svg>
    </div>
    <div class="textBox">
        <svg viewBox="10 10 600 300">
            <!-- Pattern -->
            <pattern id="p-fire" viewBox="30 100 186 200" patternUnits="userSpaceOnUse" width="216" height="200" x="-70"
                y="35">

                <!-- Fire -->
                <image xlink:href="https://tympanus.net/codrops-playground/assets/images/posts/23145/fire.gif"
                    width="256" height="300" />
            </pattern>

            <text text-anchor="middle" x="50%" y="65%" dy=".35em" stroke='#330000' strokeWidth='8' stroke-opacity='0.5'
                class="text text2" fill="url(#p-fire)"> Text
            </text>
        </svg>
    </div>

    <div class="textBox">
        <svg viewBox="10 10 600 300">
            <!-- Pattern -->
            <pattern id="p-stars" width="70" height="70" viewBox="0 0 120 120" patternUnits="userSpaceOnUse">

                <g class="g-stars">
                    <polygon
                        points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549 "
                        transform="
                          scale(.9,.9)"></polygon>

                    <polygon
                        points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
                        transform="
                          translate(30,30)
                          scale(.9,.9)
                          "></polygon>

                    <polygon
                        points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
                        transform="
                          translate(90,30)
                          scale(.9,.9)
                          "></polygon>

                    <polygon
                        points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
                        transform="
                          translate(0,60)
                          scale(.9,.9)"></polygon>

                    <polygon
                        points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549 "
                        transform="
                          translate(60,0)
                          scale(.9,.9)  
                          "></polygon>

                    <polygon
                        points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
                        transform="
                          translate(60,60)
                          scale(.9,.9)  
                          "></polygon>

                    <polygon
                        points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
                        transform="
                          translate(90,90)
                          scale(.9,.9)
                          "></polygon>

                    <polygon
                        points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
                        transform="
                          translate(30,90)
                          scale(.9,.9)
                          "></polygon>


                    <polygon
                        points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
                        transform="
                          translate(120,60)
                          scale(.9,.9)
                          "></polygon>

                    <polygon
                        points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
                        transform="
                          translate(60,120)
                          scale(.9,.9)
                          "></polygon>

                    <polygon
                        points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
                        transform="
                          translate(0,120)
                          scale(.9,.9)
                          "></polygon>

                    <polygon
                        points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
                        transform="
                          translate(-30,90)
                          scale(.9,.9)
                          "></polygon>

                    <!-- Hack to make shapes full  -->
                    <polygon></polygon>
                    <polygon></polygon>
                    <polygon></polygon>

                    <polygon
                        points="15 22.5 6.18322122 27.1352549 7.86707613 17.3176275 0.734152256 10.3647451 10.5916106 8.93237254 15 0 19.4083894 8.93237254 29.2658477 10.3647451 22.1329239 17.3176275 23.8167788 27.1352549"
                        transform="
                          translate(120,0)
                          scale(.9,.9)
                          "></polygon>

                </g>

            </pattern>

            <text text-anchor="middle" x="50%" y="66%" dy=".35em" stroke='#330000' strokeWidth='8' stroke-opacity='0.5'
                class="text textStart" fill="url(#p-stars)"> Text
            </text>
        </svg>
    </div>

    <div class="textBox">
        <svg viewBox="10 10 600 300">
            <pattern id="p-spots" width="50" height="50" viewBox="0 0 90 90" patternUnits="userSpaceOnUse">

                <g class="g-spots">

                    <ellipse rx="25" ry="35" cx="50" cy="50"></ellipse>

                    <ellipse rx="25" ry="20" cx="50" cy="50"></ellipse>

                    <ellipse rx="15" ry="20" cx="50" cy="50"></ellipse>

                    <ellipse rx="15" ry="10" cx="50" cy="50"></ellipse>

                    <ellipse rx="5" ry="10" cx="50" cy="50"></ellipse>

                </g>

                <g class="g-spots" transform="translate(45,45)">

                    <ellipse rx="25" ry="35" cx="50" cy="50"></ellipse>

                    <ellipse rx="25" ry="20" cx="50" cy="50"></ellipse>

                    <ellipse rx="15" ry="20" cx="50" cy="50"></ellipse>

                    <ellipse rx="15" ry="10" cx="50" cy="50"></ellipse>

                    <ellipse rx="5" ry="10" cx="50" cy="50"></ellipse>

                </g>

                <g class="g-spots" transform="translate(-45,45)">

                    <ellipse rx="25" ry="35" cx="50" cy="50"></ellipse>

                    <ellipse rx="25" ry="20" cx="50" cy="50"></ellipse>

                    <ellipse rx="15" ry="20" cx="50" cy="50"></ellipse>

                    <ellipse rx="15" ry="10" cx="50" cy="50"></ellipse>

                    <ellipse rx="5" ry="10" cx="50" cy="50"></ellipse>

                </g>

                <g class="g-spots" transform="translate(-45,-45)">

                    <ellipse rx="25" ry="35" cx="50" cy="50"></ellipse>

                    <ellipse rx="25" ry="20" cx="50" cy="50"></ellipse>

                    <ellipse rx="15" ry="20" cx="50" cy="50"></ellipse>

                    <ellipse rx="15" ry="10" cx="50" cy="50"></ellipse>

                    <ellipse rx="5" ry="10" cx="50" cy="50"></ellipse>

                </g>

                <g class="g-spots" transform="translate(45,-45)">

                    <ellipse rx="25" ry="35" cx="50" cy="50"></ellipse>

                    <ellipse rx="25" ry="20" cx="50" cy="50"></ellipse>

                    <ellipse rx="15" ry="20" cx="50" cy="50"></ellipse>

                    <ellipse rx="15" ry="10" cx="50" cy="50"></ellipse>

                    <ellipse rx="5" ry="10" cx="50" cy="50"></ellipse>

                </g>

            </pattern>

            <text text-anchor="middle" x="50%" y="66%" dy=".35em" class="text textSpots"> Text
            </text>
        </svg>
    </div>

    <div class="textBox">
        <svg viewBox="0 0 600 300">

            <!-- Symbol -->
            <symbol id="s-text">
                <text text-anchor="middle" x="50%" y="50%" dy=".35em">
                    欣联
                </text>
            </symbol>

            <!-- Duplicate symbols -->
            <use xlink:href="#s-text" class="text s-text"></use>
            <use xlink:href="#s-text" class="text s-text"></use>
            <use xlink:href="#s-text" class="text s-text"></use>
            <use xlink:href="#s-text" class="text s-text"></use>
            <use xlink:href="#s-text" class="text s-text"></use>

        </svg>
    </div>

    <svg viewBox="0 0 600 300">

        <!-- Symbol with text -->
        <symbol id="s-text2">
            <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text--line">
                Text
            </text>
        </symbol>

        <!-- Clippath  with text -->
        <clippath id="cp-text">
            <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text--line">
                Text
            </text>
        </clippath>

        <!-- Group for shadow -->
        <g clip-path="url(#cp-text)" class="shadow">
            <rect width="100%" height="100%" class="anim-shape anim-shape--shadow"></rect>
        </g>

        <!-- Group with clippath for text-->
        <g clip-path="url(#cp-text)" class="colortext">
            <!-- Animated shapes inside text -->
            <rect width="100%" height="100%" class="anim-shape"></rect>
            <rect width="80%" height="100%" class="anim-shape"></rect>
            <rect width="60%" height="100%" class="anim-shape"></rect>
            <rect width="40%" height="100%" class="anim-shape"></rect>
            <rect width="20%" height="100%" class="anim-shape"></rect>
        </g>

        <!-- Transparent copy of text to keep
               patterned text selectable -->
        <use xlink:href="#s-text2" class="text--transparent"></use>

    </svg>

</body>

</html>